<template>
  <div id="application-configuration" ref="application_configuration">
    <p class="title">应用配置</p>
    <div class="content-wrap" :style="{height: height}">
      <div class="condition">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <!------ 应用信息 ------>
          <el-tab-pane label="应用信息" name="use_msg">
            <el-main>
              <el-row>
                <el-form size="small" label-width="150px" class="demo-ruleForm">
                  <el-form-item label="应用名称：">
                    <span>{{ v3AppTitle }}</span>&nbsp;&nbsp;&nbsp;<span class="pen-point" @click="handleChangeAppData"><i class="iconfont icon-revise"></i></span>
                  </el-form-item>
                 <!-- <el-form-item label="创建时间：">
                    <span>xxxxx</span>
                  </el-form-item> -->
                  <el-form-item label="APP KEY：">
                    <span>{{ formData.app_key }}</span>
                  </el-form-item>
                  <el-form-item label="SECRET KEY：">
                    <span>{{ formData.secret_key }}</span>&nbsp;&nbsp;&nbsp;<span class="pen-point" @click="handleChangeKey">更换</span>
                  </el-form-item>
                  <el-form-item label="ACCESS ID：">
                    <span>{{ formData.access_id }}</span>
                  </el-form-item>
                  <el-form-item label="ACCESS KEY：">
                    <span>{{ formData.access_key }}</span>
                  </el-form-item>
                  <!-- <el-form-item label="一键接入指南：">
                    <a class="active-span" href="https://xg.qq.com/docs/android_access/jcenter.html"  target="_blank">点击查看</a>
                  </el-form-item> -->
                </el-form>
                 <el-button type="danger" class="deletapp" @click="deleteApplication">删除应用</el-button>
              </el-row>
            </el-main>
          </el-tab-pane>
          <!------ 厂商&海外通道 ------>
          <!-- <el-tab-pane label="厂商&海外通道" name="road">
            <el-main>
              <el-row>
                <span class="title-span">海外通道</span>
                <el-col>
                  <el-card class="box-card">
                    <div slot="header">
                      <span>Firebase Cloud Messaging</span>
                    </div>
                    <p>
                      在集成FCM通道之后，将具备在海外场景下进行系统级推送的能力，能够帮助应用在海外场景下快速触达用户。
                    </p>
                    <p class="is-SDK">需要安装 FCM 提供的 SDK，并且发布应用。</p>
                    <div class="card-bottom">
                      <el-button type="text">查看说明文档</el-button>
                      <el-button class="btn-right" type="text">启用</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <span class="title-span">厂商通道</span>
              <el-row>
                <el-col :span="12">
                  <el-card class="box-card">
                    <div slot="header">
                      <span>小米官方推送通道</span>
                    </div>
                    <p>
                      集成后可以在小米设备上，通过小米提供的系统级通道进行下发。
                    </p>
                    <p class="is-SDK">需要安装小米推送SDK，并且发布应用。</p>
                    <div class="card-bottom">
                      <el-button type="text">查看说明文档</el-button>
                      <el-button class="btn-right" type="text">启用</el-button>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card class="box-card">
                    <div slot="header">
                      <span>华为官方推送通道</span>
                    </div>
                    <p>
                      集成后可以在华为设备上，通过华为提供的系统级通道进行下发。
                    </p>
                    <p class="is-SDK">需要安装华为推送SDK，并且发布应用。</p>
                    <div class="card-bottom">
                      <el-button type="text">查看说明文档</el-button>
                      <el-button class="btn-right" type="text">启用</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-card class="box-card">
                    <div slot="header">
                      <span>魅族官方推送通道</span>
                    </div>
                    <p>
                      集成后可以在魅族设备上，通过魅族提供的系统级通道进行下发。
                    </p>
                    <p class="is-SDK">需要安装魅族推送SDK，并且发布应用。</p>
                    <div class="card-bottom">
                      <el-button type="text">查看说明文档</el-button>
                      <el-button class="btn-right" type="text">启用</el-button>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-main>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
    <!-- --------------- 下面放弹框 --------------- -->
    <el-dialog title="应用信息修改" :visible.sync="changeDialog" width="30%">
      <el-form :model="formModif" label-width="80px">
        <el-form-item label="应用名称">
          <el-input v-model="formModif.title"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="changeDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleModifConfirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/mobilePushAjax'
  import { APP_TYPE_ARR } from '../../comm/js/commjs'
  import { mapGetters, mapMutations } from 'vuex'
  import { nextPage } from '../../../../assets/js/index'
  import { Base64 } from 'js-base64'
  export default {
    name: 'application-configuration',
    data () {
      return {
        formData: [],
        appTypeArr: APP_TYPE_ARR,
        activeName: 'use_msg',
        tableData: [],
        formModif: {},
        changeDialog: false,
        height: null
      }
    },
    computed: {
      ...mapGetters(['v3AppTitle', 'v3AppId', 'v3AppKey', 'v3SecretKey', 'storageId'])
    },
    methods: {
      ...mapMutations(['v3_updateSecretKey']),
      handleTabClick (tab, eve) {
      },
      // 删除应用
      deleteApplication () {
        this.$confirm('此操作将永久删除该应用, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        let params = {id: this.storageId}
        ajax.post(api.LIST_DELETE_PUSH_INFO, params).then(res => {
          if (res.msg === '交易成功' && res.status === '000000') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            nextPage('/pushIndex')
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        }).catch(() => {})
        })
      },
      // 修改包名、名称
      handleChangeAppData () {
        this.formModif.title = this.v3AppTitle
        this.changeDialog = true
      },
      // 修改包名、名称 >> 确定修改
      handleModifConfirm () {
        this.changeDialog = false
         let h = { Authorization: 'Basic' + ' ' + Base64.encode(this.v3AppKey + ':' + this.v3SecretKey) }
        let params = {
          accessId: this.formData.access_id,
          appName: this.formModif.title
        }
        ajax.post(api.V3_APP_UPDATE, params, h).then(res => {
          if (res.ret_code === 0) {
            this.v3_updateSecretKey(params.secretKey)
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            this.queryAppDataList()
          } else {
              this.$message({
              type: 'err',
              message: '更新失败!'
            })
          }
        }).catch()
      },
      // 修改 SECRET KEY
      handleChangeKey () {
        this.$confirm('确定要更换SECRET KEY吗？更换成功后，请五分钟后再创建通知。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.updateAppSecretKey()
        }).catch(() => {})
      },
      // SECRET KEY 值更换
      updateAppSecretKey () {
        let h = { Authorization: 'Basic' + ' ' + Base64.encode(this.v3AppKey + ':' + this.v3SecretKey) }
        let params = {
          accessId: this.formData.access_id,
          secretKey: this.randomNum()
        }
        ajax.post(api.V3_APP_UPDATE, params, h).then(res => {
          if (res.ret_code === 0) {
            this.v3_updateSecretKey(params.secretKey)
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            this.queryAppDataList()
          } else {
             this.$message({
              type: 'err',
              message: '更新失败!'
            })
          }
        }).catch()
      },
      // 查询应用信息
      queryAppDataList () {
        let h = {
          Authorization: 'Basic' + ' ' + Base64.encode(this.v3AppKey + ':' + this.v3SecretKey),
          'Content-Type': 'application/json'
        }
        ajax.get(api.V3_APP_QUERY_DATA + this.v3AppId, h).then(res => {
          if (res.ret_code === 0 && res.err_msg === '操作成功') {
            this.formData = res.result
          }
        })
      },
      randomNum () {
        let min = 30
        let max = 32
        let returnStr = ''
        let range = max ? Math.round(Math.random() * (max - min)) + min : min
        let charStr = 'abcdefghijklmnopqrstuvwxyz0123456789'
        for (let i = 0; i < range; i++) {
          let index = Math.round(Math.random() * (charStr.length - 1))
          returnStr += charStr.substring(index, index + 1)
        }
        return returnStr
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.application_configuration.offsetHeight - 60 + 'px'
      })
      this.queryAppDataList()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #application-configuration
    height 100%
    background #f5f5f5
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .content-wrap
      overflow auto
      margin 10px 0 0 10px
      background #ffffff
      .condition
        padding 10px
        .active-span
          color #08b1ff
          cursor pointer
        .deletapp
          display block
          text-align center
          margin 50px auto
          font-size 15px
        .title-span
          line-height 30px
        .box-card
          width 400px
          .is-SDK
            margin 10px 0
          .card-bottom
            overflow hidden
            .btn-right
              float right
        .pen-point
          cursor pointer
          color #08b1ff
</style>
